<template>
  <el-row
    type="flex"
    class="row-bg"
    align="middle"
    justify="space-between"
    style="width: 100%; height: 40px"
  >
    <el-col>
      <div class="grid-content bg-purple">{{ dataNode.name }}</div>
    </el-col>

    <el-col :span="5">
      <el-row type="flex" justify="end">
        <el-col>{{ dataNode.manager }}</el-col>
        <el-col
          ><el-dropdown @command="delDeparment">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加部门</el-dropdown-item>
              <el-dropdown-item v-if="!isShow" command="del"
                >删除部门</el-dropdown-item
              >
              <el-dropdown-item v-if="!isShow" command="edit"
                >编辑部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown></el-col
        >
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    dataNode: {
      required: true,
      type: Object,
    },
    isShow: {
      default: false,
      type: Boolean,
    },
  },
  methods: {
    delDeparment(type) {
      if (type === "del") {
        // 删除
        this.$confirm("此操作将永久删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$emit("delPart", this.dataNode.id);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if (type === "edit") {
        //  编辑
        this.$emit("editPart", this.dataNode.id);
      } else if (type === "add") {
        this.$emit("addPart", this.dataNode.id);
      }
    },
  },
};
</script>

<style scoped>
</style>
